<!--
* description: 打印库区标签
-->
<template>
  <section class="editCarBrand">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      title="打印库位标签"
      :append-to-body="true"
      :visible.sync="showDialog"
      width="600px"
      @close="close"
    >
      <dialogHeader slot="title" title="打印库位标签" :styleType="$store.state.app.dialogType"></dialogHeader>
      <div class="filter-container filter-params" style="  position: relative;">
        <div class="printMain" ref="print">
          <el-button size="medium" type="primary" class="printBtn" @click="print">打印</el-button>
          <div style="page-break-after:always;" class="printInfoP">
            <div class="printInfo">
              <img id="barcode" />
              <div class="name">{{ rowData.PLACE_CODE }}</div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import JsBarcode from "jsbarcode";
export default {
  components: {
    dialogHeader: () => import("@/components/dialogHeader") //弹窗标题
  },
  props: {
    isShow: { type: Boolean, default: false },
    rowData: { type: Object, default: {} }
  },
  data() {
    return {
      // 是否显示
      showDialog: this.isShow
    };
  },
  mounted() {
    if (this.showDialog) {
      this.creatQrCode();
    }
  },
  methods: {
    creatQrCode() {
      let that = this;
      setTimeout(() => {
        JsBarcode("#barcode", that.rowData.PLACE_CODE, {
          format: "CODE39",
          lineColor: "#000",
          background: "#ffffff",
          width: 2,
          height: 60,
          displayValue: false
        });
      }, 50);
    },
    close() {
      this.showDialog = false;
      this.$emit("detailClose");
    },
    print() {
      let styles = `@page{size: auto; margin: 0mm;} .footer {display: none;}.printBtn {display: none;} .printInfoP {padding-top: 0px;font-size: 20px;} .printInfo {text-align: center;}`;
      this.$printJs.printByEle(this.$refs.print, styles);
      this.$printJs.getStyle(this.$refs.print);
      this.showDialog = false;
      this.$emit("detailClose");
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/ .el-dialog__body {
  height: calc(100% - 41px);
}
.printMain {
  width: 100%;
  .printInfo {
    padding-left: 60px;
    width: 85%;
    text-align: center;
    img {
      width: 100%;
      height: 60px;
    }
  }
  .footer {
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: 1px dashed #000;
    margin-top: 30px;
  }
}
.printBtn {
  position: fixed;
  z-index: 99999999;
  line-height: 24px;
  margin-left: -95px;
}
// @media print {
//   .footer {
//     display: none;
//   }
//   .printBtn {
//     display: none;
//   }
//   .printInfoP {
//     padding-top: 200px; //控制上下
//     font-size: 20px; // 控制字体大小
//     .printInfo {
//       padding-left: 0px; //控制左右
//     }
//   }
// }
</style>